<style>
/*订单显示*/
.item{ width:100px; height:170px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
.item .tags{width:20px;float:left;text-align:center;}
.item .pic{width:80px; float:right;text-align:center;}
.item .pic img{max-width:80px; max-height:80px;border-radius:5px;}
.item .text{text-align:center;clear:both;height:88px;overflow:hidden}
.clear{clear:both;}
</style>

<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">显示区块</label>
		<div class="layui-input-block">
			<input type="checkbox" lay-filter="sa" title="采购" id="caigou" value="caigou">
			<input type="checkbox" lay-filter="sa" title="裁床" id="caichuang" value="caichuang">
			<input type="checkbox" lay-filter="sa" title="车间" id="chejian" value="chejian">
			<input type="checkbox" lay-filter="sa" title="尾部" id="tail" value="tail">
		</div>
	</div>
</form>

<!-- 显示区 -->
<div id="listView"><img src="/static/mp/image/loading.gif"></div>
<div id="tailView"></div>

<script id="listTpl" type="text/html">
{{#  layui.each(d.list, function(k, v){ }}
<fieldset class="layui-elem-field layui-field-title">
	<legend>{{ d.factoryKV[k] }}</legend>
</fieldset>
<div class="layui-collapse" style="margin-bottom:25px;">

	{{#  layui.each(v, function(kk, vv){ }}
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">{{ d.factoryKV[k] }} - {{ d.groupKV[kk] }}</h2>
		<div class="layui-colla-content layui-show">
			
			<!-- 采购 -->
			{{#  if(vv.caigou_orders > 0){ }}
			<div class="layui-colla-item caigou {{# if (d.vals.indexOf('caigou') == -1) { }} hide {{# } }}">
				<h2 class="layui-colla-title">采购 - {{ vv.caigou_orders }}单 - {{ vv.caigou_items }}件</h2>
				<div class="layui-colla-content layui-show">
					
					{{#  layui.each(vv.caigou, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring">
						<div class="tags">{{ vvv.tags }}</div>
						<div class="pic"><img src="{{ vvv.pic }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>{{ vvv.factory_outgo_name }}</div>
					</div>
					{{#  }); }}

					<div class="clear"></div>
				</div>
			</div>
			{{#  } }}

			<!-- 裁床 -->
			{{#  if(vv.caichuang_orders > 0){ }}
			<div class="layui-colla-item caichuang {{# if (d.vals.indexOf('caichuang') == -1) { }} hide {{# } }}">
				<h2 class="layui-colla-title">裁床 - {{ vv.caichuang_orders }}单 - {{ vv.caichuang_items }}件</h2>
				<div class="layui-colla-content layui-show">
					
					{{#  layui.each(vv.caichuang, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring">
						<div class="tags">{{ vvv.tags }}</div>
						<div class="pic"><img src="{{ vvv.pic }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>{{ vvv.factory_outgo_name }}</div>
					</div>
					{{#  }); }}

					<div class="clear"></div>
				</div>
			</div>
			{{#  } }}

			<!-- 车间 -->
			{{#  if(vv.chejian_orders > 0){ }}
			<div class="layui-colla-item chejian {{# if (d.vals.indexOf('chejian') == -1) { }} hide {{# } }}">
				<h2 class="layui-colla-title">车间 - {{ vv.chejian_orders }}单 - {{ vv.chejian_items }}件</h2>
				<div class="layui-colla-content layui-show">
					
					{{#  layui.each(vv.chejian, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring">
						<div class="tags">{{ vvv.tags }}</div>
						<div class="pic"><img src="{{ vvv.pic }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>{{ vvv.factory_outgo_name }}</div>
					</div>
					{{#  }); }}

					<div class="clear"></div>
				</div>
			</div>
			{{#  } }}
				
		</div>
	</div>
	{{#  }); }}

</div>
{{#  }); }}
</script>

<script id="tailTpl" type="text/html">
<div class="layui-collapse" style="margin-bottom:25px;">
			
	<!-- 尾部 -->
	{{#  if(d.tail_orders > 0){ }}
		<div class="layui-colla-item tail {{# if (d.vals.indexOf('tail') == -1) { }} hide {{# } }}">
			<h2 class="layui-colla-title">尾部 - {{ d.tail_orders }}单 - {{ d.tail_items }}件</h2>
			<div class="layui-colla-content layui-show">
					
				{{#  layui.each(d.tail, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring">
						<div class="tags">{{ vvv.tags }}</div>
						<div class="pic"><img src="{{ vvv.pic }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>{{ vvv.factory_outgo_name }}</div>
					</div>
				{{#  }); }}

				<div class="clear"></div>
			</div>
		</div>
	{{#  } }}

</div>
</script>

{include file="system@block/layui" /}

<script>
	layui.use([ 'element', 'layer', 'form', 'cookie', 'laytpl', 'tool'], function() {
		var element = layui.element;
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var laytpl = layui.laytpl;
		
		// 默认选择
		var checked = $.cookie('outgo-done-show-area');
		var vals = checked ? checked.split(',') : [];
		for (var i in vals) {
			$("#"+vals[i]).prop("checked", true);
		}
		console.log('outgoDoneCache:'+vals.join(','));
		
		form.render();
		element.init();
		
     	// 控制显示/隐藏区块
		form.on('checkbox(sa)', function(data) {
			if (data.elem.checked && vals.indexOf(data.value) == -1) {
				vals.push(data.value);
				$(".layui-collapse ."+data.value).show();
			} else {
				vals.pop(data.value);
				$(".layui-collapse ."+data.value).hide();
			}
			console.log(vals.join(','));
			$.cookie('outgo-done-show-area', vals.join(','), {
				expires : 90
			});
		});

     	// 获取订单
		getOrders();
		function getOrders(){
			$.ajax({
			   type: "POST",
			   url: "{:url('mp/outgo/done')}",
			   data: "",
			   dataType:"json",
			   success: function(res){
				   var listTpl = $('#listTpl').html();
				   var tailTpl = $('#tailTpl').html();
				   res.data.vals = vals;
				   laytpl(listTpl).render(res.data, function(html){
				   		$('#listView').html(html);
				   });
				   laytpl(tailTpl).render(res.data, function(html){
				   		$('#tailView').html(html);
				   });
				   
				   element.init();
			   }
			});
		}
		
	});
</script>